import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class cartoon_page_value_setting extends StatefulWidget {
  const cartoon_page_value_setting({Key key}) : super(key: key);

  @override
  State<cartoon_page_value_setting> createState() =>
      _cartoon_page_value_settingState();
}

class _cartoon_page_value_settingState
    extends State<cartoon_page_value_setting> {
  List read_pattern = [
    {
      'pattern_name': '普通模式',
      'pattern_image': 'assets/images/common/cartoon/list_right.png',
      'state': 0
    },
    {
      'pattern_name': '日漫模式',
      'pattern_image': 'assets/images/common/cartoon/list_left.png',
      'state': 1
    },
    {
      'pattern_name': '滚动模式',
      'pattern_image': 'assets/images/common/cartoon/list_down.png',
      'state': 0
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Color.fromRGBO(34, 34, 35, 1),
      child: Column(
        children: [
          Row(
            children: [
              Container(
                // color: Colors.red,
                margin: EdgeInsets.only(top: 20, left: 20),
                child: Text(
                  '阅读模式',
                  style: TextStyle(color: Colors.white),
                ),
              ),
              Expanded(child: SizedBox()),
              // 三个模式
              Row(
                children: read_pattern.asMap().keys.map((e) {
                  return InkWell(
                    onTap: () {
                      print(read_pattern[e]['pattern_name']);
                    },
                    child: Container(
                      decoration: BoxDecoration(
                          border: Border.all(
                              color: read_pattern[e]['state'] == 0
                                  ? Colors.white
                                  : Color.fromRGBO(49, 169, 254, 1),
                              width: 1),
                          borderRadius: BorderRadius.all(Radius.circular(4))),
                      margin: EdgeInsets.only(top: 16, left: 8, right: 8),
                      // color: Colors.red,
                      child: Column(
                        children: [
                          // Icon(Icons.left)
                          Image.asset(
                            read_pattern[e]['pattern_image'],
                            color: read_pattern[e]['state'] == 0
                                ? Colors.white
                                : Color.fromRGBO(49, 169, 254, 1),
                          ),
                          Text(
                            read_pattern[e]['pattern_name'],
                            style: TextStyle(
                              color: read_pattern[e]['state'] == 0
                                  ? Colors.white
                                  : Color.fromRGBO(49, 169, 254, 1),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                }).toList(),
              ),

              // 三个模式
            ],
          )
        ],
      ),
    );
  }
}
